<template>
  <view class="box">
    <!-- <view class="tou top" :style="'padding-top:' + statusBarHeight1 + 'px'">
      <image @click="fanhui" src="https://pic.bangbangtongcheng.com/static/fanhui_bai.png" />问题反馈
    </view> -->
    <!-- <view class="tit" style="background-color: #fff;">
		<view :class="titXuan == 1 ? 'xuan' : ''" @click="titClick(1)">我要反馈</view>
		<view :class="titXuan == 2 ? 'xuan' : ''" @click="titClick(2)">反馈记录</view>
	</view> -->
    <template v-if="titXuan == 1">
      <view class="shuoming">
        <view class="kuang">
          <textarea
            class="textarea"
            maxlength="300"
            auto-height
            v-model="reportContent"
            placeholder="请仔细描述你的问题"
          />
          <p>{{ reportContent.length }}/300</p>
        </view>
      </view>
      <view class="shangchuan">
        <view class="cu-form-group">
          <view class="grid col-4 grid-square flex-sub">
            <view
              class="bg-img"
              style="width: 30%; margin-right: 20rpx"
              v-for="(item, index) in imgList"
              :key="index"
              @tap="ViewImage"
              :data-url="imgList[index]"
            >
              <image :src="imgUrl + item" mode="aspectFit" />
              <view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
                <text class="cuIcon-close"></text>
              </view>
            </view>
            <view class="solids" @tap="ChooseImage" v-if="imgList.length < 9">
              <text class="cuIcon-cameraadd"></text>
            </view>
          </view>
        </view>
      </view>
      <view class="tijiao">
        <view class="but" @click="submit">提交反馈</view>
      </view>
    </template>
    <template v-else-if="titXuan == 2">
      <view class="ListTab">
        <view class="ListTab-item" @click="huifu(1)">
          <span :class="huifuData == 1 ? 'ListTab-item-span-cur' : ''">未回复</span>
          <image
            v-if="huifuData == 1"
            class="ListTab-item-img"
            src="https://pic.bangbangtongcheng.com/static/xuanzhong.png"
            mode="widthFix"
          />
          <span v-else class="ListTab-item-img"></span>
        </view>
        <view class="ListTab-item" @click="huifu(2)">
          <span :class="huifuData == 2 ? 'ListTab-item-span-cur' : ''">已回复</span>
          <image
            v-if="huifuData == 2"
            class="ListTab-item-img"
            src="https://pic.bangbangtongcheng.com/static/xuanzhong.png"
            mode="widthFix"
          />
          <span v-else class="ListTab-item-img"></span>
        </view>
      </view>
      <view class="center">
        <view class="center_item" v-for="(item, index) in Recommend" :key="index">
          <view class="kuan">
            <textarea
              class="textarea"
              v-model="item.content"
              disabled
              auto-height
              placeholder="反馈内容"
            />
          </view>
          <view class="time">
            {{ item.createDate }}
          </view>
        </view>
        <view v-if="Recommend.length == 0" class="none">
          <image src="https://pic.bangbangtongcheng.com/static/none.png" mode="widthFix" />
          <view>没有更多数据了</view>
        </view>
      </view>
    </template>
    <uniBall></uniBall>
  </view>
</template>
<script>
  import permision from '@/js_sdk/wa-permission/permission.js'
  //#ifdef H5
  import wxshare from '../utils/index.js'
  //#endif
  import { mapGetters } from 'vuex'
  export default {
    data() {
      return {
        xuan: '',
        imgList: [],
        reportContent: '',
        imgUrl: this.$imgSrc,
        id: '',
        titXuan: 1,
        huifuData: 1,
        userInfo: uni.getStorageSync('Pduser'),
        Recommend: [],
      }
    },
    onLoad(options) {
      this.id = options.id
      /* #ifdef H5 */
      this.jinzhi()
      /* #endif */
    },
    computed: {
      ...mapGetters(['statusBarHeight1', 'userinfo']),
    },
    methods: {
      titClick(e) {
        this.titXuan = e
        if (e == 2) {
          this.fankui(this.huifuData)
        }
      },
      huifu(index) {
        this.huifuData = index
        this.fankui(index)
      },
      // 获取反馈数据
      fankui(index) {
        let that = this
        this.$myRequest
          .get('/api/mobile/public/getProblemFeedbackByReplyStatus', {
            userId: this.userInfo.id,
            replyStatus: index == 1 ? '0' : '1',
          })
          .then((res) => {
            this.Recommend = res.problemFeedback.pageList
          })
      },
      ViewImage(e) {
        let imgs = []
        this.imgList.forEach((e) => {
          imgs.push(this.$imgSrc + e)
        })
        uni.previewImage({
          urls: imgs,
          current: this.$imgSrc + e.currentTarget.dataset.url,
        })
      },
      DelImg(e) {
        uni.showModal({
          title: '',
          content: '确定要删除该图片？',
          cancelText: '取消',
          confirmText: '确定',
          success: (res) => {
            if (res.confirm) {
              this.imgList.splice(e.currentTarget.dataset.index, 1)
            }
          },
        })
      },
      submit() {
        if (!this.reportContent || this.reportContent == '') {
          uni.showToast({
            title: '请输入文字',
            icon: 'success',
            mask: true,
          })
          return
        }
        let data = {
          feedbackPerson: this.userInfo.id,
          content: this.reportContent,
          feedbackPicture: this.imgList.join('|'),
        }
        this.$myRequest.post('/api/mobile/public/increaseProblemFeedback', data).then((res) => {
          if (res.code == 200) {
            uni.showToast({
              title: '反馈成功',
              icon: 'none',
            })
            setTimeout(() => {
              uni.navigateBack()
            }, 1500)
          }
        })
      },
      changeType(e) {
        this.xuan = e.detail.value
      },
      jinzhi() {
        let _this = this
        let param = window.location.href.split('#')[0]
        uni.request({
          method: 'post',
          data: { url: param },
          header: {
            'content-type': 'application/x-www-form-urlencoded',
          },
          url: 'https://www.bangbangtongcheng.com/conven//mob/login/getJsTicket.do',
          success(re) {
            _this.jinzhifx(re.data)
          },
        })
      },
      jinzhifx(data) {
        wxshare.config({
          debug: false, //是否打开调试
          appId: data.appId, // 公众号的唯一标识
          timestamp: data.timestamp, // 生成签名的时间戳
          nonceStr: data.nonce, // ，生成签名的随机串
          signature: data.signature, // 签名
          jsApiList: ['hideMenuItems'],
        })
        // 禁止分享
        wxshare.hideMenuItems({
          // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
          menuList: [
            'menuItem:share:appMessage',
            'menuItem:share:timeline',
            'menuItem:share:timeline',
            'menuItem:share:qq',
            'menuItem:favorite',
            'menuItem:share:QZone',
            'menuItem:openWithSafari',
          ],
        })
      },
      async ChooseImage() {
        this.ChooseImage1()
      },
      ChooseImage1() {
        let _this = this
        uni.chooseImage({
          count: 9 - _this.imgList.length,
          sizeType: ['copressed'],
          sourceType: ['camera', 'album'],
          success(res) {
            //因为有一张图片， 输出下标[0]， 直接输出地址
            const tempFiles = res.tempFiles
            let panduan = false
            tempFiles.forEach((i, j) => {
              let length = ''
              // #ifdef H5
              length = i.name.length
              let resType = i.name.substring(length - 1, length)
              // #endif
              // #ifndef H5
              length = i.path.length
              let resType = i.path.substring(length - 1, length)
              // #endif
              if (resType != 'g' && resType != 'G') {
                panduan = true
              }
            })
            if (panduan) {
              uni.showToast({
                title: '不支持当前文件格式',
                icon: 'none',
              })
              return
            }
            var imgFiles = res.tempFilePaths
            // console.log(imgFiles);
            if (_this.imgList.length + imgFiles.length > 9) {
              uni.showToast({
                title: '图片最多不能超过9张',
                duration: 2000,
                icon: 'none',
              })
              return
            }
            var uper
            imgFiles.forEach((el) => {
              uni.showToast({
                title: '正在上传请稍后',
                icon: 'none',
                duration: 2000,
              })
              uper = uni.uploadFile({
                // 需要上传的地址
                url: 'https://www.bangbangtongcheng.com/conven/ht/attach/qnUpload',
                // filePath  需要上传的文件
                filePath: el,
                name: 'file',
                success(res1) {
                  console.log(JSON.parse(res1.data).data[0].url)
                  _this.imgList.push(JSON.parse(res1.data).data[0].url)
                },
              })
            })

            // onProgressUpdate 上传对象更新的方法
            uper.onProgressUpdate(function (res) {})
          },
          fail: (fail) => {
            uni.showModal({
              title: '提示',
              content: '操作权限已被拒绝，请手动前往设置',
              confirmText: '立即设置',
              success: (res) => {
                if (res.confirm) {
                  if (plus.os.name === 'iOS') {
                    plus.runtime.openURL('app-settings://')
                  } else {
                    var Intent = plus.android.importClass('android.content.Intent')
                    var Settings = plus.android.importClass('android.provider.Settings')
                    var Uri = plus.android.importClass('android.net.Uri')
                    var mainActivity = plus.android.runtimeMainActivity()
                    var intent = new Intent()
                    intent.setAction(Settings.ACTION_APPLICATION_DETAILS_SETTINGS)
                    var uri = Uri.fromParts('package', mainActivity.getPackageName(), null)
                    intent.setData(uri)
                    mainActivity.startActivity(intent)
                  }
                }
              },
            })
          },
        })
      },
      fanhui() {
        uni.navigateBack({
          delta: 1,
        })
      },
    },
  }
</script>
<style lang="less" scoped>
  page {
    background-color: #fff;
  }
  .box {
    position: absolute;
    width: 100%;
    top: 0;
    bottom: 0;
    color: #333;
    background-color: #fff;
  }
  .ListTab {
    height: 100rpx;
    display: flex;
    align-items: center;
    margin-left: 30rpx;
    .ListTab-item {
      height: 100%;
      position: relative;
      font-size: 32rpx;
      font-weight: 400;
      color: #333333;
      margin-right: 40rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .ListTab-item-img {
        width: 60rpx;
        height: 30rpx !important;
      }
      .ListTab-item-span-cur {
        font-size: 36rpx;
        font-weight: 600;
        color: #64b6a8;
      }
    }
  }
  .center {
    display: flex;
    flex-direction: column;
    align-items: center;
    .center_item {
      width: 700rpx;
      border-radius: 22rpx;
      background-color: #fff;
      padding-left: 30rpx;
      margin-bottom: 30rpx;
      .kuan {
        width: 640rpx;
        min-height: 200rpx;
        margin-top: 40rpx;
        border: 1px solid #c9c9c9;
        .textarea {
          width: 600rpx;
          margin-left: 20rpx;
          margin-top: 14rpx;
          margin-bottom: 20rpx;
          line-height: 50rpx;
          letter-spacing: 2rpx;
          font-size: 24rpx;
        }
      }
      .time {
        text-align: right;
        margin-top: 14rpx;
        font-size: 26rpx;
        font-weight: 400;
        color: #999999;
        margin-right: 30rpx;
        margin-bottom: 24rpx;
      }
    }
  }
  .tit {
    width: 750rpx;
    height: 100rpx;
    background: rgba(255, 255, 255, 0.39);
    box-shadow: 0px 2rpx 6rpx rgba(0, 0, 0, 0.08);

    view {
      display: inline-block;
      width: 50%;
      text-align: center;
      line-height: 100rpx;
      font-size: 32rpx;
    }

    .xuan {
      transform: scale(1.1);
      color: #64b6a8;
    }
  }
  .tijiao {
    position: fixed;
    width: 100%;
    bottom: 0rpx;
    padding-bottom: 40rpx;
    background-color: #fff;
    checkbox {
      vertical-align: top;
      margin-right: 6rpx;
      margin-left: 40rpx;
    }
    span {
      font-size: 26rpx;
    }
    .but {
      width: 670rpx;
      height: 80rpx;
      background: #64b6a8;
      border-radius: 50rpx;
      font-size: 34rpx;
      text-align: center;
      line-height: 80rpx;
      color: #fff;
      margin-top: 24rpx;
      margin-left: 40rpx;
    }
  }
  .shangchuan {
    margin-top: 24rpx;
    margin-left: 8rpx;
    padding-bottom: 212rpx;
  }
  .shuoming {
    .name {
      font-size: 34rpx;
      margin-top: 40rpx;
      margin-left: 40rpx;
    }
    .kuang {
      position: relative;
      width: 670rpx;
      min-height: 80rpx;
      margin-top: 40rpx;
      margin-left: 40rpx;

      border: 1px solid #c9c9c9;
      textarea {
        width: 620rpx;
        margin-left: 24rpx;
        margin-top: 14rpx;
        line-height: 50rpx;
        letter-spacing: 2rpx;
        padding-bottom: 50rpx;
      }
      p {
        position: absolute;
        bottom: 10rpx;
        right: 20rpx;
        color: #999999;
      }
    }
  }
  .leixin {
    .name {
      font-size: 34rpx;
      margin-top: 40rpx;
      margin-left: 40rpx;
    }
    .radioList {
      margin-top: 40rpx;
      margin-left: 70rpx;
    }
    .radio {
      display: block;
      font-size: 34rpx;
      margin-bottom: 40rpx;
      radio {
        margin-right: 20rpx;
      }
    }
  }
  .tou {
    position: relative;
    width: 100%;
    text-align: center;
    line-height: 88rpx;
    font-size: 36rpx;
    color: #fff;
    background-color: #64b6a8;
    image {
      position: absolute;
      width: 32rpx;
      height: 32rpx;
      // top: 116rpx;
      left: 30rpx;
    }
  }
  .grid.col-4.grid-square > uni-view {
    width: 212rpx;
    height: 212rpx;
  }
  .grid.col-4.grid-square > uni-view:nth-child(3n) {
    margin-right: 0;
  }
  /deep/uni-radio .wx-radio-input,
  /deep/uni-radio .uni-radio-input {
    width: 46rpx;
    height: 46rpx;
  }
  /deep/.uni-radio-input-checked {
    background-color: #64b6a8 !important;
    border-color: #64b6a8 !important;
  }
  /deep/uni-checkbox .uni-checkbox-input {
    background-color: rgba(0, 0, 0, 0);
    border: 2rpx solid #999;
  }
  /deep/uni-checkbox .wx-checkbox-input,
  /deep/uni-checkbox .uni-checkbox-input {
    width: 28rpx;
    height: 28rpx;
  }
  /deep/.uni-checkbox-input-checked {
    background-color: #64b6a8 !important;
    border: 2rpx solid #64b6a8 !important;
  }
  /deep/.tijiao uni-checkbox::before {
    font-size: 24rpx;
    margin-top: -14rpx;
    right: 4rpx !important;
  }
  .textarea {
    min-height: 200rpx;
  }
  .none {
    text-align: center;

    image {
      width: 430rpx;
      margin-bottom: 16rpx;
    }

    view {
      height: 40rpx;
      line-height: 40rpx;
      color: #666;
    }
  }
</style>
